<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值图demo</title>
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap img[src^=data] {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- 用于绘制插值图的canvas -->
    <canvas id="canvasMap0" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap1" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap2" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap3" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap4" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap5" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap6" style="display: none; opacity: 0.2"></canvas>
    <canvas id="canvasMap7" style="display: none; opacity: 0.2"></canvas>
    <div id="allmap"></div>

    <script src="../lib/jquery-2.2.3.min.js"></script>
    <script src="../lib/turf.js"></script>
    <script src="../lib/kriging.js"></script>
    <script src="../lib/lodash.min.js"></script>
    <script type="text/javascript" src="../data/zhongguo.js"></script>
    <script type="text/javascript" src="../data/aqidata.js"></script>
   
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=3.0&amp;ak=SS4ym5KlDwbL1ld0GOu6Tiisa7A5mpXh"></script>
    <script type="text/javascript">

        //中国
        const xlim = [73.33, 135.05];
        const ylim = [3.51, 53.33];
        const Ylim = [
            [48.33, 53.33],
            [43.33, 48.33],
            [38.33, 43.33],
            [33.33, 38.33],
            [28.33, 33.33],
            [23.33, 28.33],
            [18.33, 23.33]
        ];
        const factor = 'aqi';

        let aqidata = result.rows;
        const colors = ['#52EB00', '#6AE005', '#83D50B', '#9BC90F', '#B3BD15', '#CCB21A', '#D4AF1C', '#DCAD1D', '#E5AB1F', '#EDA821', '#F5A623', '#F58F22', '#F37720', '#F35F1F', '#F2471D', '#F12F1C', '#E0282D', '#CF223E', '#BE1A4F', '#AE1460', '#9C0D71', '#910C68', '#850A60', '#7A0857', '#6F064E', '#630445'];//定义的基础颜色数组
        let colors2 = []; //绘图用的颜色数组
        let range = []; //绘图区域的点位数据
        let cloudMapLevelArr = [];
        let points = []; // 处理过的绘图所需的点位数据
        let variogram;

        $.each(zhongguo.features, function (index, value) {
            if (index == 4) {
                range.push(value.geometry.coordinates[0]);
            } else {
                $.each(value.geometry.coordinates, function (i, v) {
                    $.each(v, function (a, b) {
                        range.push(b);
                    })
                })
            }
        })
        console.log('range', range);

        handelPoint();

        function handelPoint() {
            $.each(aqidata, function (index, value) {
                points.push({
                    aqi: value.aqi,
                    lat: value.lat,
                    lng: value.lng
                })
            })

            //对插值点的数据进行处理 转化为和color数组对应的值 
            $.each(points, function (index, value) {
                if (factor == 'aqi' || factor == 'AQI') {
                    cloudMapLevelArr = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 220, 240, 260, 280, 300];
                } else if (factor == 'pm25' || factor == 'PM2.5') {
                    cloudMapLevelArr = [0, 7, 14, 21, 28, 35, 43, 51, 59, 67, 75, 83, 91, 99, 107, 115, 122, 129, 136, 143, 150, 170, 190, 210, 230, 250];
                } else if (factor == 'pm10' || factor == 'PM10') {
                    cloudMapLevelArr = [0, 10, 20, 30, 40, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 364, 378, 392, 406, 420];
                } else if (factor == 'so2' || factor == 'SO2') {
                    cloudMapLevelArr = [0, 30, 60, 90, 120, 150, 220, 290, 360, 430, 500, 530, 560, 590, 620, 650, 680, 710, 740, 770, 800, 960, 1120, 1280, 1440, 1600];
                } else if (factor == 'no2' || factor == 'NO2') {
                    cloudMapLevelArr = [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1450, 1700, 1950, 2200, 2340];
                } else if (factor == 'co' || factor == 'CO') {
                    cloudMapLevelArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 66, 72, 78, 84, 90];
                } else if (factor == 'o3' || factor == 'O3') {
                    cloudMapLevelArr = [0, 32, 64, 96, 128, 160, 168, 176, 184, 192, 200, 220, 240, 260, 280, 300, 320, 340, 360, 380, 400, 480, 560, 640, 720, 800];
                }
                var data = value.aqi;
                value.aqi = data > cloudMapLevelArr[0] && data <= cloudMapLevelArr[1] ? 0
                    : data > cloudMapLevelArr[1] && data <= cloudMapLevelArr[2] ? 1
                        : data > cloudMapLevelArr[2] && data <= cloudMapLevelArr[3] ? 2
                            : data > cloudMapLevelArr[3] && data <= cloudMapLevelArr[4] ? 3
                                : data > cloudMapLevelArr[4] && data <= cloudMapLevelArr[5] ? 4
                                    : data > cloudMapLevelArr[5] && data <= cloudMapLevelArr[6] ? 5
                                        : data > cloudMapLevelArr[6] && data <= cloudMapLevelArr[7] ? 6
                                            : data > cloudMapLevelArr[7] && data <= cloudMapLevelArr[8] ? 7
                                                : data > cloudMapLevelArr[8] && data <= cloudMapLevelArr[9] ? 8
                                                    : data > cloudMapLevelArr[9] && data <= cloudMapLevelArr[10] ? 9
                                                        : data > cloudMapLevelArr[10] && data <= cloudMapLevelArr[11] ? 10
                                                            : data > cloudMapLevelArr[11] && data <= cloudMapLevelArr[12] ? 11
                                                                : data > cloudMapLevelArr[12] && data <= cloudMapLevelArr[13] ? 12
                                                                    : data > cloudMapLevelArr[13] && data <= cloudMapLevelArr[14] ? 13
                                                                        : data > cloudMapLevelArr[14] && data <= cloudMapLevelArr[15] ? 14
                                                                            : data > cloudMapLevelArr[15] && data <= cloudMapLevelArr[16] ? 15
                                                                                : data > cloudMapLevelArr[16] && data <= cloudMapLevelArr[17] ? 16
                                                                                    : data > cloudMapLevelArr[17] && data <= cloudMapLevelArr[18] ? 17
                                                                                        : data > cloudMapLevelArr[18] && data <= cloudMapLevelArr[19] ? 18
                                                                                            : data > cloudMapLevelArr[19] && data <= cloudMapLevelArr[20] ? 19
                                                                                                : data > cloudMapLevelArr[20] && data <= cloudMapLevelArr[21] ? 20
                                                                                                    : data > cloudMapLevelArr[21] && data <= cloudMapLevelArr[22] ? 21
                                                                                                        : data > cloudMapLevelArr[22] && data <= cloudMapLevelArr[23] ? 22
                                                                                                            : data > cloudMapLevelArr[23] && data <= cloudMapLevelArr[24] ? 23
                                                                                                                : data > cloudMapLevelArr[24] && data <= cloudMapLevelArr[25] ? 24
                                                                                                                    : data > cloudMapLevelArr[25] ? 25 : 0;
            });

            console.log('points', points);

            //根据aqi的范围配置颜色数组 
            var aqiArr = _.map(points, 'aqi');
            var max = _.max(aqiArr, 'aqi');
            var min = _.min(aqiArr, 'aqi');
            colors2 = colors.slice(min, max + 1);

            //对数据集进行训练
            var n = points.length;
            var t = []; // 数值
            var x = []; // 经度
            var y = []; // 纬度
            for (var i = 0; i < n; i++) {
                t.push(points[i].aqi);
                x.push(points[i].lng);
                y.push(points[i].lat);
            }

            variogram = kriging.train(t, x, y, 'exponential', 0, 100);
        }

        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
        map.enableScrollWheelZoom();

        createPoints();

        // 创建用于插值的随机数据点
        function createPoints() {
            $.each(points, function (index, value) {
                var point = new BMap.Point(value.lng, value.lat);
                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);
                var label = new BMap.Label(value.aqi, { offset: new BMap.Size(20, -10) });
                marker.setLabel(label);
            })
        }

        for (let i = 0; i < 7; i++) {
            canvasLayer(i);
        }

        //进行克里金插值
        function loadkriging(index) {
            var canvas = document.getElementById('canvasMap' + index);
            canvas.width = 500;
            canvas.height = 500;
            //使用variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值,最后一个参数，是插值格点精度大小
            var grid = kriging.grid(range, variogram, 0.5);
            console.log('colors2', colors2)
            //将得到的格网grid渲染至canvas上
            kriging.plot(canvas, grid, [xlim[0], xlim[1]], [Ylim[index][0], Ylim[index][1]], colors2);

            // 将插值结果进行处理，转换为图片格式以便作为图层接入mapboxgl地图中
            return canvas.toDataURL('image/png');
        }

        function canvasLayer(index) {
            // 西南角和东北角
            var SW = new BMap.Point(73.33, Ylim[index][0]);
            var NE = new BMap.Point(135.05, Ylim[index][1]);
            groundOverlayOptions = {
                opacity: 0.8,
                id: 'colorImg'
                // displayOnMinLevel: 10,
                // displayOnMaxLevel: 22
            }
            // 初始化GroundOverlay
            var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE), groundOverlayOptions);
            // 设置GroundOverlay的图片地址
            console.log(index);
            groundOverlay.setImageURL(loadkriging(index));
            map.addOverlay(groundOverlay);
        }

    </script>
</body>

</html>